<template>
  <div class="from">
    <div class="title">发布供求</div>
    <div class="imgBox">
      <van-uploader v-model="fileList" :max-count="1" :after-read="afterRead" />
    </div>
    <div class="sort-box">
      <div class="name">类别</div>
      <div class="sort-btn">
        <div class="btn">
          供
          <van-switch size="16px" active-color="#e49829" v-model="checked0" />
        </div>
        <div class="btn">
          求
          <van-switch size="16px" active-color="#e49829" v-model="checked1" />
        </div>
      </div>
    </div>
    <van-cell-group>
      <van-field label="品名" required v-model="params.kname" placeholder="请输入品名" />
      <van-field label="单位" v-model="params.unit" placeholder="请输入单位" />
      <van-field label="价格" v-model="params.price" placeholder="请输入价格" />
      <van-field label="数量" v-model="params.nums" placeholder="请输入数量" />
      <van-field
        required
         style="height: auto!important;
    padding: 15px !important;"
        v-model="params.content"
        label="留言"
        type="textarea"
        placeholder="请描述下产品的信息（200字以内）"
        rows="3"
        @input="descInput"
        maxlength="200"
      />
    </van-cell-group>
    <div class="btnBox">
      <div class="btn sure" @click="comfirm">提交</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { postsupplybuydata } from "../../api/replay";
export default {
  data() {
    return {
      checked0: true,
      checked1: false,
      fileList: [], //上传图片
      isPost: false, //防止多次提交
      params: {
        type: 0,
        content: "",
        kname: "",
        price: "",
        unit: "",
        nums: "",
        img: "",
        op: "add"
      }
    };
  },
  computed: {
    checkedSet() {
      return this.checked0;
    },
    checkedSet1() {
      return this.checked1;
    }
  },
  watch: {
    checkedSet(news, old) {
      this.checked1 = !this.checked0;
      if (this.checked1) {
        this.params.type = 1;
      } else {
        this.params.type = 0;
      }
    },
    checkedSet1(news, old) {
      this.checked0 = !this.checked1;
    }
  },
  methods: {
    descInput() {
      if (this.params.content.length >= 200) {
        this.$toast("最多填写200字");
        return false;
      }
    },
    afterRead(file) {},
    comfirm() {
      if (!this.params.kname) {
        this.$toast("品名不可以为空");
        return false;
      }
      if (!this.params.content) {
        this.$toast("商品描述不可以为空");
        return false;
      }

      if (this.fileList.length > 0) {
        this.params.img = this.fileList[0].content;
      }
      if (this.isPost) {
        this.$toast("数据提交中");
        return false;
      }
      this.isPost = true;
      postsupplybuydata(this.params).then(res => {
        this.isPost = false;
        if (res.code == "0000") {
          this.$toast("发布成功");
          let query = { type: this.params.type };
          this.$router.push({ path: "qgList", query: query });
        } else {
          this.$toast(res.msg);
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.from {
  //   width: 7rem;
  min-height: 100%;
  background: #ffffff;
  .imgBox {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sort-box {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 0.3rem;
    .name {
      flex: none;
      width: 90px;
    }
    .sort-btn {
      width: 100%;
      flex: 1;
      display: flex;
      .btn {
        width: 40%;
        display: flex;
        align-items: center;
      }
      .van-switch {
        margin-left: 0.1rem;
      }
    }
  }
  .title {
    font-size: 0.4rem;
    font-weight: bolder;
    color: #e49829;
    line-height: 1.3rem;
    text-align: center;
  }
  .btnBox {
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    .btn {
      width: 6.9rem;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      line-height: 0.9rem;
      background: #e49829;
      border-radius: 0.1rem;
    }
  }
}
</style>
